<!DOCTYPE html>
<html>
<head>
<base href="${basePath}">
<meta charset="UTF-8">
<title>高级搜索</title>
<link rel="stylesheet" type="text/css" href="${viewPath}/resources/css/expression.css" />
</head>
<body>
	$!{include("import_js_css.html")}
	$!{include("header.html")}
	<div class="container" style="width: 1200px;">
		<div class="panel panel-info">
			<div id="div_result_member" style="padding:15px 0 0 5px;">
				
				<!-- 条件start -->
				<div class="div_search_result" style="width: 170px; height: 100% !important; display: inline-block; vertical-align: top;">
					<div id="shu" style="border:1px solid #CCC; margin-top:-10px;" >
					 			<div class="typeList">
				<ul id="tree" class="ztree" style="width:180px; margin-top:1px;"></ul>
			</div>
			<SCRIPT type="text/javascript" >
			  	var zNodes=eval('[$!{tree}]');
				 function zTreeOnClick(event, treeId, treeNode) {
					if(treeNode.expression == "" || treeNode.expression == null){
						$("#groupName").val("");
						$("#expression").val("");
					}else{
						$("#groupName").val(treeNode.text);
						$("#expression").val(treeNode.expression);
					}
					$("#expressionType").val(treeNode.valueType);
					
					//提示
					var type = treeNode.valueType;
					if (type == "number") {
						$("#proNameTint").text("请输入整数");
					} else if (type == "string") {
						$("#proNameTint").text("");
					} else if (type == "datetime") {
						$("#proNameTint").text("格式：2014-01-01 12:12:12");
					} else if (type == "date") {
						$("#proNameTint").text("格式：2014-01-01");
					} else if (type == "time") {
						$("#proNameTint").text("格式：12:12:12");
					}
				}
			  	var setting = {
		  			view: {
						dblClickExpand: false,
						showLine: true,
						selectedMulti: false,
					},
		  			data :{
		  				key : {
		  					name:"text",
		  					children:"childNodes",
		  					url:"link"
		  				}
		  			},
				     callback: {
							onClick: zTreeOnClick
					} 
			  	};
			  </SCRIPT>
					</div>
				</div>
				<!-- 条件end -->
				
				<div class="panel" style="display: inline-block; width: 970px !important; vertical-align: top;">
					<!-- 创建表达式区域start -->
					<div class="div_search_result" style="float: none !important;">
						<div style="margin-top:-20px;">
							<input readonly type="text" class="form-control" name="name" id="groupName" value="Test" style="width:200px; float:left; margin-top:6px;">
							<input id="expression" type="hidden" value="member.birthday">
							<input id="expressionType" type="hidden" value="number">
							<select id="resporId" name="resporId" style="float:left; margin-top:6px; margin-left:20px; width:80px;">
								<option value=""> </option>
								<option value=">">大于</option>
								<option value="<">小于</option>
								<option value="==">等于</option>
								<option value=">=">大于等于</option>
								<option value="<=">小于等于</option>
								<option value="!=">不等于</option>
								<option value="== null">为空</option>
								<option value="!= null">不为空</option>
							</select>
							<input type="text" class="form-control" id="proName" style="width:200px; float:left; margin-top:6px; margin-left:20px;">
							<label id="proNameTint" for="proName" class="col-sm-2 control-label"></label>
							<button id="btn_member_export" type="button" class="btn btn-default panel-radius-all" style="margin-top:6px; margin-left:20px;">保存</button>
						</div>
					</div>
					<div style="clear:both;"></div>
					<!-- 创建表达式区域end -->
					
					<!-- 表达式组合区域start -->
					<div class="div_search_result" style="float: none !important;">
						<div class="panel-heading panel-result panel-result-title">
							<h3 class="panel-title">表达式</h3>
							<div class="btn-group btn-gp-default">
								<button id="ds_fit_meanwhile" type="button" class="btn btn-default panel-radius-left">同时满足</button>
								<button id="ds_fit_oneMore" type="button" class="btn btn-default panel-radius-none">满足其一</button>
								<button id="ds_fit_contrary" type="button" class="btn btn-default panel-radius-none">满足相反</button>
								<button id="ds_fit_delete" type="button" class="btn btn-default panel-radius-right">删除</button>
							</div>
						</div>
						
						<table id="tb_stratety" class="table table-bordered table-hover table-condensed tb" style="text-align: center;">
							<tr>
								<td style="width: 30px;">
									<input name="ds_selectAll" type="checkbox">
								</td>
								<td style="width: 60px;">序号</td>
								<td>表达式</td>
							</tr>
							<tr id="ds_tr_1">
								<td>
									<input name="ds_name_1" type="checkbox">
								</td>
								<td>
									<span>1</span>
								</td>
								<td id="ds_td_1">
									<span>年龄大于30</span>
									<p id="ds_condition_1">member.age &gt; 30</p>
								</td>
							</tr>
							<tr id="ds_tr_2">
								<td>
									<input name="ds_name_2" type="checkbox">
								</td>
								<td>
									<span>2</span>
								</td>
								<td id="ds_td_2">
									<span>性别等于男</span>
									<p id="ds_condition_2">member.sex = '男'</p>
								</td>
							</tr>
							
							<tr id="ds_tr_3">
								<td>
									<input name="ds_name_3" type="checkbox">
								</td>
								<td>
									<span>3</span>
								</td>
								<td id="ds_td_3">
									<span>会馆号等于001</span>
									<p id="ds_condition_3">member.organizationId = '001'</p>
								</td>
							</tr>
							
							<tr id="ds_tr_4">
								<td>
									<input name="ds_name_4" type="checkbox">
								</td>
								<td>
									<span>4</span>
								</td>
								<td id="ds_td_4">
									<span>会员地区等于123</span>
									<p id="ds_condition_4">member.areaId = 123</p>
								</td>
							</tr>
						</table>
					</div>
					<!-- 表达式组合区域end -->
				</div>
				
				
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	//记录策略索引
	var count = $("input[name^='ds_name_']").length;
	
	$(document).ready(function() {
		var t = $("#tree");
		t = $.fn.zTree.init(t, setting, zNodes);
		
		$("#shu").find('div span').click(function(){
			var id = $(this).attr("id");
			id = id.substring(16, id.length);
			var con = $(this).text();
			var val = $("#hidden_expression_" + id).val();
			$("#groupName").val(con);
			$("#expression").val(val);
		});
		
		//下拉列表框
		$("#resporId").select2({
			width: "100px",
			minimumResultsForSearch: -1
		});
		
		//点击生成表达式
		$("#btn_member_export").click(function(){
			//获得选择的条件名称
			var shuconn = $("#groupName").val().trim();
			//获得大于小于选择框的显示文字
			var selectconn = $("#resporId").find("option:selected").text().trim();
			//获得大于小于选择框符号
			var selectVal = $("#resporId").select2("val");
			//获得输入框的值
			var proconn = $("#proName").val().trim();
			//获得表达式的字段部分
			var expression = $("#expression").val().trim();

			//条件不能为空
			if (expression == null || expression.length <= 0) {
				alert("请选择一个条件！")
				return;
			}
			
			//符号不能为空
			if (selectconn == null || selectconn.length <= 0) {
				alert("请选择一个比较符号！");
				return;
			}
			
			var bigconn = shuconn + selectconn + proconn;
			var bigVal = expression + " " + selectVal + " " + proconn;
			if (bigVal == "== null" || bigVal == "!= null") {
				bigconn = shuconn + selectconn;
				bigVal = expression + " " + selectVal;
			} else {
				if (proconn == null || proconn.length <= 0) {
					alert("请输入比较字符串！");
					return;
				}
			}
			count ++;
			
			
			//判断类型
			var type = $("#expressionType").val();
			if (type != "number") {
				proconn = "\"" + proconn + "\"";
			}
			
			bigVal = expression + " " + selectVal + " " + proconn;
			
			$("#tb_stratety").append(
				"<tr id='ds_tr_" + count + "'>" + 
				"<td><input name='ds_name_" + count + "' type='checkbox'></td>" + 
				"<td><span>" + count + "<span></td>" + 
				"<td id='ds_td_" + count + "'><span>" + bigconn + "</span><p id='ds_condition_" + count + "'>" + bigVal + "</p></td>" + 
				"</tr>"
			);
		});
		//全选
		$("input[name='ds_selectAll']").click(function() {
			$("input[name^='ds_name_']").prop("checked", $(this).prop("checked"));
		});

		//同时满足
		$("#ds_fit_meanwhile").click(function() {
			var len = $("input[name^='ds_name_']:checked").length;
			if (len < 1) {
				alert("请选择一个表达式！");
				return;
			} else if (len == 1) {
				alert("请选择另一个表达式！");
				return;
			}
			var selDS = new Array();
			
			//记录选中的序号
			var stgText = new Array();
			$("input[name^='ds_name_']:checked").each(function() {
				var name = $(this).attr("name");
				var index = name.substring(8, name.length);
				//var text = $("#ds_td_" + index + " span").text().trim();
				stgText.push("满足条件" + index);
				//拼接表达式
				var strategy = $("p[id='ds_condition_" + index + "']").text();
				selDS.push("(" + strategy + ")");
			});
			var strategies = selDS.join(" && ");
			
			var text = stgText.join(" 且 ");
			count ++;
			$("#tb_stratety").append(
				"<tr id='ds_tr_" + count + "'>" + 
				"<td><input name='ds_name_" + count + "' type='checkbox'></td>" + 
				"<td><span>" + count + "<span></td>" + 
				"<td id='ds_td_" + count + "'><span>" + text + "</span><p id='ds_condition_" + count + "'>" + strategies + "</p></td>" + 
				"</tr>"
			);
			
			console.log("合并后的表达式：" + strategies + "---");
		});
		
		//满足其一
		$("#ds_fit_oneMore").click(function() {
			var len = $("input[name^='ds_name_']:checked").length;
			if (len < 1) {
				alert("请选择一个表达式！");
				return;
			}
			var selDS = new Array();
			
			//记录选中的序号
			var stgText = new Array();
			$("input[name^='ds_name_']:checked").each(function() {
				var name = $(this).attr("name");
				var index = name.substring(8, name.length);
				stgText.push("满足条件" + index);
				
				//拼接表达式
				var strategy = $("p[id='ds_condition_" + index + "']").text();
				selDS.push("(" + strategy + ")");
			});
			var strategies = selDS.join(" || ");
			
			var text = stgText.join(" 或 ");
			count ++;
			$("#tb_stratety").append(
				"<tr id='ds_tr_" + count + "'>" + 
				"<td><input name='ds_name_" + count + "' type='checkbox'></td>" + 
				"<td><span>" + count + "<span></td>" + 
				"<td id='ds_td_" + count + "'><span>" + text + "</span><p id='ds_condition_" + count + "'>" + strategies + "</p></td>" + 
				"</tr>"
			);
			
			console.log("合并后的表达式：" + strategies + "---");
		});
		
		//满足相反
		$("#ds_fit_contrary").click(function() {
			var len = $("input[name^='ds_name_']:checked").length;
			if (len < 1) {
				alert("请选择一个表达式！");
				return;
			} else if (len > 1) {
				alert("只可选择一个！");
				return;
			}
			var selDS = new Array();
			
			var stgText = new Array();
			$("input[name^='ds_name_']:checked").each(function() {
				//记录选中的序号
				var name = $(this).attr("name");
				var index = name.substring(8, name.length);
				stgText.push("不满足条件" + index);
				
				//拼接表达式
				var strategy = $("p[id='ds_condition_" + index + "']").text();
				selDS.push("!(" + strategy + ")");
			});
			
			var strategies = selDS.join(" && ");
			
			var text = stgText.join(" ");
			count ++;
			$("#tb_stratety").append(
				"<tr id='ds_tr_" + count + "'>" + 
				"<td><input name='ds_name_" + count + "' type='checkbox'></td>" + 
				"<td><span>" + count + "<span></td>" + 
				"<td id='ds_td_" + count + "'><span>" + text + "</span><p id='ds_condition_" + count + "'>" + strategies + "</p></td>" + 
				"</tr>"
			);
			
			console.log(strategies);
		});
		
		//删除
		$("#ds_fit_delete").click(function() {
			var len = $("input[name^='ds_name_']:checked").length;
			if (len < 1) {
				alert("请选择一个表达式！");
				return;
			}
			
			confirm("确定删除？", function() {
				$("input[name^='ds_name_']:checked").each(function() {
					var name = $(this).attr("name");
					var index = name.substring(8, name.length);
					
					//移除选择的tr
					$("#ds_tr_" + index).remove();
				});
				
				//全选按钮重置
				$("input[name='ds_selectAll']").prop("checked", false);
			});			
		});
	});
</script>
</html>
